<template>
    <layout class="layout">
        <sider ref="side" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
            <div class="cms-logo">CMS</div>
            <i-menu :active-name="$route.name" theme="dark" width="auto" :class="menuitemClasses">
                <div v-for="v in router" :key="v.name">
                    <submenu v-if="v.children" :name="v.name">
                        <template slot="title">
                            <Icon :type="v.meta.icon"/>
                            <span>{{v.meta.title}}</span>
                        </template>
                        <menu-item :name="c.name" v-for="c in v.children" :key="c.name" :to="c.path">
                            <div style="padding-left: 10px;">{{c.meta.title}}</div>
                        </menu-item>
                    </submenu>
                    <menu-item v-else :name="v.name" :to="v.path">
                        <icon :type="v.meta.icon"></icon>
                        <span>{{v.meta.title}}</span>
                    </menu-item>
                </div>
            </i-menu>
        </sider>
        <layout>
            <i-header :style="{padding: 0}" class="layout-header-bar">
                <div class="left">
                    <div class="icon">
                        <icon @click.native="collapsedSider"
                              :class="rotateIcon"
                              :style="{margin: '0 20px'}"
                              type="md-menu"
                              size="24"></icon>
                    </div>
                    <breadcrumb>
                        <!--<breadcrumb-item to="/">首页</breadcrumb-item>-->
                        <breadcrumb-item>{{$route.meta.title}}</breadcrumb-item>
                    </breadcrumb>
                </div>
                <div class="right">
                    <badge :count="0" :offset="[15,40]">
                        <router-link to="/message_page" tag="div">
                            <icon class="cur notice" type="md-notifications"></icon>
                        </router-link>
                    </badge>
                    <dropdown trigger="click" placement="bottom-end">
                        <div class="cur">
                            <avatar :src="$root.FILE_PATH + userinfo.headImg" shape="square" icon="ios-person" size="large"/>
                            <icon type="ios-arrow-down"></icon>
                        </div>
                        <dropdown-menu slot="list">
                            <div @click="quitLogin">
                                <dropdown-item>退出登录</dropdown-item>
                            </div>
                            <dropdown-item>个人资料</dropdown-item>
                        </dropdown-menu>
                    </dropdown>
                </div>
            </i-header>
            <i-content style="padding:10px;">
                <router-view/>
            </i-content>
        </layout>
    </layout>
</template>
<script>
    export default {
        name: 'Main',
        data() {
            return {
                isCollapsed: false,
                router: [],
            }
        },
        watch: {
            $route(val) {
                this.setTitle()
            }
        },
        computed: {
            userinfo(){
                return this.$store.state.user.info
            },
            rotateIcon() {
                return [
                    'menu-icon',
                    this.isCollapsed ? 'rotate-icon' : ''
                ]
            },
            menuitemClasses() {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        },
        created() {
            console.log(this.$store.state.user.info.headImg)
            this.setTitle()
            this.$store.dispatch('getUserInfo')
            // console.log(this.$store.dispatch())
            this.initRouterList()
        },
        mounted() {
        },
        methods: {
            setTitle(){
                document.title = this.$route.meta.title
            },
            collapsedSider() {
                this.$refs.side.toggleCollapse()
            },
            initRouterList() {
                const router = this.$router.options.routes
                for (let i of router) {
                    if (!i.meta || !i.meta.hideMenu) {
                        if (i.children.length === 1) {
                            for (let j of i.children) {
                                if (!j.meta.hideMenu) {
                                    this.router.push(j)
                                }
                            }
                        }
                        if (i.children.length > 1) {
                            const obj = JSON.parse(JSON.stringify(i))
                            const arr = obj.children.filter(item => {
                                return !item.meta.hideMenu
                            })
                            obj.children = arr
                            this.router.push(obj)
                        }
                    }
                }
            },
            quitLogin() {
                this.$store.dispatch('quitLogin')
            }
        },
        components: {}
    }
</script>
<style lang="scss">
    .ivu-layout-sider {
        height: 100vh;
        .ivu-menu-item{
            display: flex;
            align-items: center;
            span{
                line-height: 1;
                padding: 5px 0;
            }
        }
    }
</style>
